<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>5 分钟上手 ECharts</title>
  <!-- 引入 ECharts 文件 -->
  <script src="../plugins/echarts/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM 容器 -->
<div id="chart" style="width: 100%;height: 400px;"></div>
<script type="text/javascript">
    //  基于准备好的 DOM，初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById('chart'));
    //  指定图表的配置项和数据
    var option = {
        //  1. 图表标题
        title: {
            //  图表主标题
            text: 'ECharts 入门示例',
            //  图表子标题
            subtext: '统计分析柱状图',
            //  图表标题位置（靠左对齐）
            x: 'left',
        },
        //  2. 提示框组件配置（鼠标悬停时显示数据详情）
        tooltip: {
            //  默认显示系列名称和数值
            //  触发类型：'axis'（坐标轴触发）| 'item'（数据项触发），在柱状图中为 axis
            trigger: 'axis',
            //  坐标轴指示器
            axisPointer: {
                //   阴影指示器（可选：'line' | 'shadow' | 'none'）
                type: 'shadow',
                shadowStyle: {
                    //  阴影颜色
                    color: 'rgba(0, 0, 0, 0.1)',
                }
            }
        },
        //  3. 图例（标识不同数据系列）
        legend: {
            //  当前存在多个数据系列："销量" "库存"
            data: ['销量', '库存']
        },
        //  4. X 轴配置
        xAxis: {
            //  类目轴（显示离散的文本标签，如商品名称）
            type: 'category',
            //  类目数据
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        //  5. Y 轴配置
        yAxis: {
            //  数值轴（自动根据数据范围计算刻度）
            type: 'value'
        },
        //  6. 数据系列配置
        series: [
            {
                //  系列名称（需与 legend.data 对应）
                name: '销量',
                //  图表类型：柱状图
                type: 'bar',
                //  柱子颜色
                itemStyle: {color: '#3398DB'},
                //  在柱顶显示数值
                label: {show: true, position: 'top'},
                //  数据值（与 xAxis.data 顺序一致）
                data: [5, 20, 36, 10, 10, 20],
            },
            //  添加多个系列（如同时显示销量和库存）
            {
                name: '库存',
                type: 'bar',
                //  柱子颜色
                itemStyle: {color: '#2F4554'},
                //  在柱顶显示数值
                label: {show: true, position: 'top'},
                data: [15, 30, 25, 40, 20, 10]
            },
        ]
    };
    //  使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //  响应式调整：监听窗口大小变化，重新调整图表尺寸
    /* window.addEventListener('resize', function() {
         myChart.resize();
     });*/

    //  防抖处理
    function debounce(fn, delay) {
        let timer;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, arguments), delay);
        };
    }

    window.addEventListener('resize', debounce(function () {
        myChart.resize();
    }, 200));  // 200ms 内仅执行一次
</script>
</body>
</html>